<template>
  <div class="app-container">
    <el-card>
      <!-- table表格：展示用户信息的地方 -->
      <el-table border stripe v-loading="listLoading" :data="users">
        <el-table-column
          type="index"
          label="序号"
          width="80"
          align="center"
        />

        <el-table-column prop="name" label="用户名" width="width" align="center"/>
        <el-table-column prop="page" label="头像" width="width" align="center">
          <template slot-scope="{row,index}">
            <img :src="row.page" style="height=100px;width:100px" v-if="row.page!=null"/>
            <span v-else>未设置</span>
          </template>
        </el-table-column>
        <el-table-column prop="sex" label="性别" align="center" />
        <el-table-column prop="phone" label="手机号" width="width" align="center"/>
        <el-table-column prop="state" label="用户状态" width="width" align="center">
          <template slot-scope="{ row, $index }">
            <el-tag type="success" v-show="row.state == 1">状态正常</el-tag></el-tag>
            <el-tag type="danger" v-show="row.state == 2">限制购买</el-tag>
            <el-tag type="warning" v-show="row.state == 3">限制发帖</el-tag>
            <el-tag type="info" v-show="row.state == 4">限制发帖</el-tag>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="230" align="center">
          <template slot-scope="{ row }">
            <HintButton
              type="info"
              size="mini"
              icon="el-icon-user-solid"
              title="权限分配"
              @click="showRole(row)"
            />
          </template>
        </el-table-column>
      </el-table>

      <el-dialog
        title="设置权限"
        :visible.sync="dialogRoleVisible"
        :before-close="resetRoleData"
      >
        <el-form label-width="80px">
          <el-form-item label="用户名">
            <el-input disabled :value="user.name"></el-input>
          </el-form-item>

          <el-form-item label="权限列表">
            <el-radio-group v-model="user.state">
            <el-radio :label="1">正常状态</el-radio>
            <el-radio :label="2">限制购买</el-radio>
            <el-radio :label="3">限制发帖</el-radio>
            <el-radio :label="4">限制跟帖</el-radio>
          </el-radio-group>
          </el-form-item>
        </el-form>

        <div slot="footer">
          <el-button :loading="loading" type="primary" @click="commitRole"
            >保存</el-button
          >
          <el-button @click="resetRoleData">取消</el-button>
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import cloneDeep from "lodash/cloneDeep";

export default {
  name: "User",

  data() {
    return {
      listLoading: false, // 是否显示列表加载的提示
      users: [], // 当前页的用户列表
      user: {}, // 当前要操作的user
      loading: false, // 是否正在提交请求中
      dialogRoleVisible: false, // 是否显示权限Dialog
      allRoles: [], // 所有权限设置
      states:["正常状态","限制购买","限制发帖","限制跟帖"]
    };
  },

  created() {
    this.getUsers();
  },

  methods: {
    async getUsers() {
      let res = await this.$API.user.getUserList();
      if (res.code == 200) {
        this.users = res.data;
      }
    },
    // 权限设置
    showRole(row){
      this.user=row;  
      this.dialogRoleVisible=true;
    },
    // 保存状态
    async commitRole(){
        let res =await this.$API.user. reqUserState(this.user)
        if(res.code==200){
          this.$message.success('权限修改成功');
          this.dialogRoleVisible=false;
          this.getUsers()
        }else{
          alert('修改失败')
        }
    },
    // 取消
    resetRoleData(){
      this.dialogRoleVisible=false;
      this.getUsers()
    }
  },
};
</script>
